<template>
  <el-dialog append-to-body title="品牌资料包" :show-close="false" :close-on-click-modal="false" :close-on-press-escape="false" :destroy-on-close="true" :visible.sync="visible" :width="'480px'">
    <div v-loading="pageLoading">
      <el-table stripe max-height="480" style="border: 1px solid #d7dae2;" :data="pageData" :header-cell-style="tableHeaderStyle" v-loading="loading" class="margin_top_20" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="42"></el-table-column>
          <el-table-column type="index" label="序号"></el-table-column>
          <el-table-column prop="originalFilename" label="资料">
            <template slot-scope="scope">
              <span class="text-brand">{{scope.row.originalFilename}}</span>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="creatorId" label="上传人"></el-table-column>
          <el-table-column prop="createTime" label="上传时间"></el-table-column> -->
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button size="mini" @click="fileDownload([baseUrl + scope.row.url])">下载</el-button>
              <el-button size="mini" type="danger" @click="fileRemove([scope.row.id])">删除</el-button>
            </template>
        </el-table-column>
      </el-table>
      <div class="margin_top_10" v-show="pageData.length">
        <el-button size="small" @click="allFileDownload()">下载</el-button>
        <el-button size="small" type="danger" @click="allFileRemove()">删除</el-button>
        <app-uploader-zip :limit="1" :fileFormat="rarFileFormat" ref="uploadRef" @success="filesSuccessOption($event)" class="fr">
            <template slot="uploader">
                <el-button>上传</el-button>
            </template>
        </app-uploader-zip>
      </div>
    </div>
    <div slot="footer" class="dialog-footer">
      <!-- <el-button :disabled="submitLoading" @click="closeModal()">取消</el-button> -->
      <el-button type="primary" :loading="submitLoading" @click="closeModal()">确定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Setting from '@/settings';
import AppUploaderZip from '@/components/AppUploaderZip/index';
import { GetGoodsZipList, InsertGoodsZipList, UpdateGoodsZipList } from '@/views/store-management/services/index';
export default {
  props: ['visible', 'brandId'],
  components: {AppUploaderZip},
  data() {
    return {
      files: null,
      tableHeaderStyle: Setting.tableHeaderStyle,
      pageData: [],
      loading: false,
      pageLoading: false,
      submitLoading: false,
      multipleSelection: [],
      fileFormat: ['zip'],
      rarFileFormat: ['zip'],
      baseUrl: process.env.VUE_APP_FILE_URL + '/'
    }
  },
  watch: {
    visible: {
      immediate: true,
      handler(newValue) {
        if (!newValue) return;
        this.getPageDataList();
      }
    }
  },
  methods: {
    filesSuccessOption(event) {
      this.pageLoading = true;
      const queryData = {
          id: this.brandId, // 商品id	
           zips: event.map(item => {
                    return {
                        url: item.fileUrl,
                        originalFilename: item.originalFilename
                    }
                }), 
          type: 2
      }
      InsertGoodsZipList(queryData)
      .finally(() => this.pageLoading = false)
      .then(data => {
          if (data.code == 200) {
              this.$message.success('添加成功!');
              this.getPageDataList();
          } else {
              this.$message.error('添加失败!');
          }
      })

      this.$refs.uploadRef.fileList = [];
    },
    closeModal() {
      this.$emit('update:visible', false);
    },
    allFileRemove() {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$message.warning('请选择需要删除的资源包!');
        return;
      }
      this.fileRemove(this.multipleSelection.map(item => item.id));
    },
    fileRemove(nodeIds) {
      this.$confirm('此操作将永久删除资源包, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnClickModal: false,
          closeOnPressEscape: false,
          type: 'warning',
          beforeClose: (action, instance, done) => {
              if (action === 'confirm') {
                  instance.confirmButtonLoading = true;
                  UpdateGoodsZipList({ ids: nodeIds })
                  .then(data => {
                      instance.confirmButtonLoading = false;
                      if (data.code == 200) {
                          this.$message.success('删除成功!');
                          done()
                      } else {
                      this.$message.success('删除失败!');
                      }
                  })
                  .catch(error => {
                      instance.confirmButtonLoading = false;
                  })
              } else {
                  done();
              }
          }
      }).then(() => {
          this.getPageDataList();
      })
    },
    allFileDownload() {
      if (!this.multipleSelection || !this.multipleSelection.length) {
        this.$message.warning('请选择需要下载的资源包!');
        return;
      }
      this.fileDownload(this.multipleSelection.map(item => this.baseUrl + item.url));
    },
    fileDownload(files) {
      this.filesDownload(files);
    },
    handleSelectionChange(selectlist) {
      this.multipleSelection = selectlist;
    },
    getPageDataList() {
      this.loading = true;
      GetGoodsZipList({
        type: 2,
        id: this.brandId
      })
      .finally(() => (this.loading = false))
      .then(data => {
        if (data.code == 200) {
          this.pageData = data.data;
        }
      })
    }
  }
}
</script>
